/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text,
    LineColumn,
    InputLine,
    TextArea,
    Input,
    Select,
    Button,
    useTheme,
    Table,
    TableBody,
    TableRow,
    CCell,
    Layer, TableHead, Cell,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, SelectHookfork, useItemInputControl,
} from "../common/base";
import {useMeasureInpFilter} from "../common/hooks";
import {Notepad, TechnicalWitness} from "../park/editor";
import {EachMeasureItemConfig} from "../common/measure";
import {useMeasureEdit} from "../hook/useMeasure";
import {Each_ZdSetting, useTableEditor} from "../hook/useRepTableEditor";

//可以复用的组件： 尽量抽象 和 提高代码复用程度！
interface Props  extends InternalItemProps{
    label?: string;
    nos?: string;
    titles?: any[];    //可能是Node[]，不一定纯粹string;  可变的多个标题编码的。
    zjuse?: number;     //最末尾的注释的文本使用那一段话？可选择办法的。
    config?: any[];    //有配置模式的 : 表对象的默认取值；
}

export const itemA技术见证=['见证表','记事表','大备注'];
const default见证: never[]=[];
const default记事=[{nm:'检验意见通知书'},];
/**通用见证材料3项的： 约定：children [] 可以嵌入俩个儿子DOM节点，分别代表两个段落插入一个div块;
 * */
export const WitnessCr3=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,titles}:Props,  ref
    ) => {
        const defvcbFunc = React.useCallback((par: any) => {
            const { 见证表,记事表 }=par||{};
            if(!见证表 || 见证表.length<1)   par.见证表=default见证;
            if(!(记事表?.length>=1))   par.记事表=default记事;
            return  par;
        }, []);
        const [getInpFilter]=useMeasureInpFilter(null,itemA技术见证,defvcbFunc);
        const {inp, setInp} = useItemInputControl({ ref });
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd}
                                    alone={alone} label={label!}>
            <TechnicalWitness nums={6} inp={inp} setInp={setInp} defaultV={default见证}
                              label={titles![0] + '、技术资料和工作见证材料'}/>
            {(children as any[])?.[0]}
            <hr/>
            <Notepad nums={5} inp={inp} setInp={setInp} defaultV={default记事} label={titles![1] + '、记事'}/>
            <hr/>
            <Text variant="h5">
                {titles![2]}、备注
            </Text>
            <TextArea value={inp?.大备注 || ''} rows={4}
                      onChange={e => setInp({...inp, 大备注: e.currentTarget.value || undefined})}/>
            {(children as any[])?.[1]}
        </InspectRecordLayout>;
    });

export interface ObservationMeasureProps  extends InternalItemProps{
    label: string;
    config: ( (orc:any)=>EachMeasureItemConfig[][] ) | EachMeasureItemConfig[][];
    iAname?: string[];           //附加的存储那些字段     ，'观测备注'
}
export const itemA观测=['观测备注',];
/**更为通用性的测量： 可拆分两个编辑器， children也能注入内容。 iAname：附加存储。
 * */
export const ObservationMeasure =
    React.forwardRef((
        {children, show, alone = true, refWidth,label,config,iAname}: ObservationMeasureProps, ref
    ) => {
        const {inp, setInp} = useItemInputControl({ref});
        const newconfig=typeof config ==='function'? config(inp) : config;
        const {render,itemObservation, itemObservationA,}=useMeasureEdit(inp,setInp, newconfig, false ,false);
        const itemA = React.useMemo(() => {
            return [...itemObservationA, ...itemA观测, ...iAname??[]];
        }, [itemObservationA, iAname]);
        const [getInpFilter] = useMeasureInpFilter(itemObservation, itemA,);
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label}>
                {label}<br/>
                { render }
                备注：
                <TextArea  value={inp?.观测备注 ||''} rows={5}
                           onChange={e => setInp({ ...inp, 观测备注: e.currentTarget.value||undefined}) } />
                { children }
            </InspectRecordLayout>
        );
    } );

const config附设装置=[['附表序号','n',35],['设备种类','y',150,(obj,setObj)=>{
    return <Select inputSize="md" css={{minWidth:'140px',fontSize:'1.3rem',padding:'0 1rem'}}
                   value={obj?.y ||''} onChange={e => setObj({ ...obj, y: e.currentTarget.value||undefined}) }>
        <option></option> <option>桥架型起重机、臂架型起重机、电动葫芦等起重设备</option> <option>升降机等登机设备</option> </Select>
    }],['设备名称','t',80],['设备型号','m',70],['额定起重量','Q',50],
    ['产品编号','p',68],['制造单位','u',112],['检验结果','r',35,(obj,setObj)=>{
        return <SelectHookfork value={ obj?.r ||''} onChange={e => setObj({ ...obj, r: e.currentTarget.value||undefined}) }/>
    }],['备注','Z',80]] as Each_ZdSetting[];
const 默认附设装置=[{n:'1',y:'桥架型起重机、臂架型起重机、电动葫芦等起重设备'},{n:'2',y:'桥架型起重机、臂架型起重机、电动葫芦等起重设备'},{n:'3',y:'升降机等登机设备'}];
export const itemA附设装=['附设表' ];
export const AttachmentUnitGant=
React.forwardRef(({ children, show ,alone=true,refWidth,label,nos}:Props,  ref
) => {
    const theme = useTheme();
    const [getInpFilter]=useMeasureInpFilter(null,itemA附设装,(par)=>{
        const { 附设表,}=par;
        if(!附设表)   par.附设表=默认附设装置;          //【特别注意】不能用附设装需改名附设表，同名字导致错误不好解决不易发现，
        return  par;
    });
    const {inp, setInp} = useItemInputControl({ ref });
    const headvw2=<Text variant="h5">
        {label}：
    </Text>;
    const breaks2=[280,620];
    const editAs=(obj:any, setObj:React.Dispatch<React.SetStateAction<any>>, seq:number | null)=>{
        const table='附设表';
        return <Layer elevation={"sm"} css={{display: 'flex',justifyContent: 'center',flexDirection: 'column',width: '-webkit-fill-available',
            [theme.mediaQueries.md]: {flexDirection: 'row',padding:'0.25rem'}
        }}>
            {seq===null? '新' : seq!+1}
            <div className="editLinc" css={{width: '-webkit-fill-available'}}>
                <LineColumn className="editItems" column={3} >
                    {(config附设装置).map(([title,tag, _, callback]:any,i:number) => {
                        if(tag==='Z')  return  <React.Fragment key={i}></React.Fragment>;
                        else return (
                            <InputLine key={i} label={title+'：'}
                                       css={{ "& .InputLine__Head": {alignItems: 'center'} }}
                            >
                                { callback ? callback(obj,setObj)
                                    :
                                    <Input value={obj?.[tag] ||''}
                                           onChange={e => {
                                               setObj({...obj, [tag]: (e.currentTarget.value||undefined)});
                                           } } />
                                }
                            </InputLine>
                        );
                    } )  }
                </LineColumn>
                备注：
                <TextArea  value={obj?.Z ||''} rows={3}
                           onChange={e => setObj({ ...obj, Z: e.currentTarget.value||undefined}) } />
                <Button onPress={() => {
                    if(seq !== null) {
                        inp?.[table]?.splice(seq, 1, obj);    //替换掉的
                        setInp({ ...inp, [table]: [...inp?.[table]] });
                    }
                    else if(inp?.[table]?.length>0){
                        inp?.[table]?.splice(inp?.[table]?.length, 0, obj);    //尾巴加
                        setInp({ ...inp, [table]: [...inp?.[table]] });
                    }
                    else  setInp({ ...inp, [table]: [obj] });
                } }
                >{(inp?.[table]?.length>0 && seq!==null)? `改一组就确认`: `新增一组`}</Button>
            </div>
        </Layer>;
    };
    const [render附设装置]=useTableEditor({breaks:breaks2,inp,setInp,
        headview:headvw2, config: config附设装置, table:'附设表', column:2,  defaultV:默认附设装置, editAs,maxRf:1});

    return (
        <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                             alone={alone}  label={label!}>
            {label}<br/>
            附表{nos}-1 桥架型起重机、臂架型起重机、电动葫芦等起重设备:
            <Table fixed={ ["13%","%"] } css={{borderCollapse: 'collapse'}} tight  miniw={800}>
                <TableHead>
                    <TableRow><CCell>序号</CCell><CCell>检验内容</CCell></TableRow>
                </TableHead>
                <TableBody>
                    <TableRow><CCell>1</CCell><Cell>金属结构无明显可见的损伤、缺陷。</Cell></TableRow>
                    <TableRow><CCell>2</CCell><Cell>各主要零部件和电气设备无明显可见的损伤、缺陷。</Cell></TableRow>
                    <TableRow><CCell>3</CCell><Cell>空载试验，操纵系统动作可靠、准确，各机构运行正常，无异常噪声等现象；起升高度限位、运行行程限位、幅度限位等安全保护装置动作可靠、准确。急停开关功能正常。</Cell></TableRow>
                </TableBody>
            </Table>
            附表{nos}-3 升降机等登机设备:
            <Table fixed={ ["13%","%"] } css={{borderCollapse: 'collapse'}} tight  miniw={800}>
                <TableHead>
                    <TableRow><CCell>序号</CCell><CCell>检验内容</CCell></TableRow>
                </TableHead>
                <TableBody>
                    <TableRow><CCell>1</CCell><Cell>金属结构无明显可见的损伤、缺陷。</Cell></TableRow>
                    <TableRow><CCell>2</CCell><Cell>吊笼门应当能够完全遮蔽开口，并且配备机械锁在运行状态下门不能被打开；所有吊笼门都处于关闭位置时，吊笼才能启动和保持运行。</Cell></TableRow>
                    <TableRow><CCell>3</CCell><Cell>层门应与吊笼电气或机械联锁，只有在吊笼底板在登机平台时，该平台的层门方可打开。所有层门处于关闭和锁紧位置时，吊笼才能启动和保持运行。</Cell></TableRow>
                    <TableRow><CCell>4</CCell><Cell>空载试验，操纵系统动作可靠、准确，各机构运行正常，无异常噪声等现象；限位开关、极限开关等安全保护装置动作可靠、准确。急停开关功能正常。</Cell></TableRow>
                </TableBody>
            </Table>
            {render附设装置}
            { children }
        </InspectRecordLayout>
    );
} );

